<template>
    <el-dialog v-model="visible" title="编辑图标" destroy-on-close @close="handleClose" width="740px" append-to-body>
        <div class="custom-icon" w-full>
            <el-form label-width="70" label-position="left">
                <el-form-item label="地址">
                    <el-input v-model="formData.url" class="custom-input" :prefix-icon="Link" placeholder="https://">
                        <template #append>
                            <el-button>获取图标</el-button>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item label="名称">
                    <el-input v-model="formData.name" class="custom-input" :prefix-icon="EditPen" placeholder="网站名称">
                    </el-input>
                </el-form-item>
                <el-form-item label="图标颜色">
                    <ul flex class="font-part" pd0>
                        <li v-for="(item, index) in bgColors">
                            <div class="font-item" style="margin-right: 5px;" :style="{ background: item }"
                                @click="handleSelectBgColor(item)">
                                <i class="iconfont icon-gou" :style="{ color: '#fff' }" v-if="formData.bgColor == item"></i>
                            </div>
                        </li>
                        <li>
                            <el-color-picker v-model="formData.bgColor" />
                        </li>
                    </ul>
                </el-form-item>
                <el-form-item label="图标文字">
                    <el-input v-model="formData.iconText" placeholder="请输入图标文字" class="custom-input" style="width: 210px;"
                        :prefix-icon="EditPen">
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <div class="icon-preview active">
                        <div class="icon-part"
                            :style="{ background: formData.bgColor ? formData.bgColor : 'rgba(var(--alpha-color),.05)' }">
                            {{ formData.iconText }}
                        </div>
                        文字图标
                    </div>
                    <div class="icon-preview">
                        <div class="icon-part" style="color:black">
                            +
                        </div>
                        上传
                    </div>
                </el-form-item>
                <el-form-item style="margin-bottom: 0;">
                    <el-button type="primary" style="width: 120px;" mr20 @click="handleSave">保存</el-button>
                </el-form-item>
            </el-form>
        </div>
    </el-dialog>
</template>

<script setup lang="ts">
import { Link, EditPen } from '@element-plus/icons-vue'
import { useGlobalStore } from '@/store/module/global'
import { AppListType } from '@/store/interface/global';

const globalStore = useGlobalStore()
const bgColors = ['#1890ff', 'rgb(251, 190, 35)', 'rgb(252, 69, 72)', 'rgb(75, 60, 54)', 'rgb(125, 172, 104)', 'rgb(200, 172, 112)', 'rgb(244, 238, 230)', 'rgb(55, 33, 40)', 'rgb(200, 44, 52)', 'rgb(5, 64, 146)', 'rgb(163, 221, 185)', 'rgba(var(--alpha-color),.05)']

const formData = reactive<AppListType>({
    id: '',
    url: '',
    name: '',
    iconText: 'A',
    bgColor: 'rgba(var(--alpha-color),.05)',
    iconImg: '',
    type: "app",
    size: "1x1"
})

const handleSelectBgColor = (item: string) => {
    formData.bgColor = item
}

const handleSave = () => {
    if (!formData.url || !formData.name) {
        return Message('请输入网站地址和名称', 'error')
    }
    globalStore.updateGroupApp(Object.assign({}, deepCopy(formData), { url: 'http://' + formData.url }))
    Message(`编辑[${formData.name}]成功`)
    handleClose()
}

const handleClose = () => {
    visible.value = false
}

const visible = ref(false)

const show = (app:AppListType) => {
    visible.value = true
    setReactive(formData,app)
}

defineExpose({
    show
})
</script>

<style scoped></style>